<template>
    <div>
        <div class="Mmain">
        <div id="head1">
            <div id="touxiang">
                <button class="circlebtn" @click="dialogFormVisibleimg = true"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.TQcBnO20xnfq0rGqNdZdJQAAAA?pid=ImgDet&rs=1" width="200px" height="200px" class="img-circle" alt="圆形图片" ></button></div>
            <div id="yonghu">
                <p id="yhm">用户名:不挂科</p>
                <p id="uid">UID:1</p>
<!--                <p >用户组:{{user.utype|utp}}</p>-->
                <p >个性签名:不挂科</p>
            </div>
            <div id="grxx">
                <el-button type="text" @click="dialogFormVisible = true"><i class="icon  icon-cog icon-5x" style="color:#ccc"></i></el-button>
            </div>
        </div>
        <div id="main1">
            <div>
                <p id="mbt">已发布视频</p><br>
                <p id="msl">{{pandnp.coutnp}}</p>
            </div>
            <div>
                <p id="mbt">正在审核视频</p><br>
                <p id="msl">{{pandnp.coutp}}</p>
            </div>
            <div>
                <p id="mbt">总收藏数</p><br>
                <p id="msl">0</p>
            </div>
            <div>
                <p id="mbt">总分享数</p><br>
                <p id="msl">0</p>
            </div>
        </div>
        <div id="main2">
            <div id="mainz">
                <div>
                    <h2>观看历史</h2>
                    <el-table :data="views" style="width: 100%" >     
                    <el-table-column prop="vname" label="影片名" width="300" align="center">
                    </el-table-column>
                    <el-table-column prop="viewtime" label="观看时间" align="center" :formatter="dataFormat">
                    </el-table-column>
                    </el-table>
                </div>
                <div></div>
            </div>
            <div id="mainy">
                <div>
                    <h2>分享记录</h2>
                    <el-table :data="shar" style="width: 100%">     
                    <el-table-column prop="vname" label="影片名" width="300" align="center">
                    </el-table-column>
                    <el-table-column prop="sharetime" label="分享时间" align="center" :formatter="dataFormat">
                    </el-table-column>
                    </el-table>
                </div>
                <div></div>
            </div>
        </div>
</div>

<el-dialog title="修改用户信息" :visible.sync="dialogFormVisible">
  <el-form :model="user">
<!--    <el-form-item label="用户昵称" :label-width="formLabelWidth">-->
<!--      <el-input v-model="user.uickname" autocomplete="off"></el-input>-->
<!--    </el-form-item>-->
    <el-form-item label="用户密码" :label-width="formLabelWidth">
      <el-input v-model="user.upassword" autocomplete="off" type="password"></el-input>
    </el-form-item>
<!--    <el-form-item label="用户简介" :label-width="formLabelWidth">-->
<!--      <el-input v-model="user.uintroduce" autocomplete="off" type="textarea"></el-input>-->
<!--    </el-form-item>-->
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <router-link to="login">
      <el-button type="primary" @click="star()">确 定</el-button>
    </router-link>

  </div>
</el-dialog>
<el-dialog title="修改用户头像" :visible.sync="dialogFormVisibleimg">
   <div>
        <el-upload action="" :auto-upload='false' :file-list="fileList" :on-change="handleChange">

        </el-upload>
            <el-button type="success" @click="submitUpload">上传到服务器</el-button>
    </div>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
  </div>
</el-dialog>
    </div>
</template>

<script>
    export default {
        name: '',
        data() {

            return {
                uid:"",
                user:[
                  {"uid": 1, "uickname": "aaa", "password": "aaaa", "uintroduce": "aaaa", "uImg": "https://tse3-mm.cn.bing.net/th/id/OIP-C.TQcBnO20xnfq0rGqNdZdJQAAAA?pid=ImgDet&rs=1"}
                ],
                shar:[],
                views:[],
                sanc:[],
                pandnp:[],
                 dialogFormVisible: false,
                 dialogFormVisibleimg: false,
                 formLabelWidth: '120px',
                 fileList: [],
                 msg:"",
            }
        },
        methods: {
          star(){
            this.$message({message: '修改成功', type: "success", duration: 500})
          },

          //修改时间格式
          dataFormat(row,column){
              let data = row[column.property]
              if (data ===null) {
                  return ''
              }
              let dt = new Date(data)
              // console.log("dt"+dt);
                  return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate() + ' ' + dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds()
              },
          updateUser(){
                   this.$axios.post('doupdateuser.do?uickname='+this.user.uickname+'&upassword='+this.user.upassword+'&uintroduce='+this.user.uintroduce+'&uid='+this.user.uid).then(
                      response=>{
                      if(response.data>0){
                          this.dialogFormVisible=false
                      }else{
                         alert("修改失败")
                      }
                      }
                  )
              },
          delFile() {
                  this.fileList = [];
          },
          handleChange(file, fileList) {
                  this.fileList = fileList;
          },
          submitUpload() {
          let formData = new FormData(); //文件转换
          formData.append("fileList", this.fileList[0].raw);
          this.$axios.post('uimgfileUpload.do', formData, {
                      "Content-Type": "multipart/form-data;charset=utf-8"
                  }).then(res => {
                      this.msg=res.data;
                      console.log(res)
                      this.$axios.post('doupdateuser.do?uImg='+this.msg+'&uid='+this.uid).then(
                      response=>{
                      if(response.data>0){
                          this.dialogFormVisible=false
                      }else{
                         alert("修改失败")
                      }
                      }
                  )
                  })

          }


        },
        components: {},
    mounted() {
    this.uid=window.localStorage.getItem('uid');
             console.log(this.uid);
      // this.$axios.get('/findUserByid.do?uid='+this.uid).then(response => {
      //   this.user = response.data
      //   console.log(response.data);
      // }).catch(function (error) {
      //   console.log(error);
      // })

      this.$axios.get('/findpandnp.do?uid='+this.uid).then(response => {
        this.pandnp = response.data
        console.log(response.data);
      }).catch(function (error) {
        console.log(error);
      })

       this.$axios.get('/findshareancoll.do?uid='+this.uid).then(response => {
        this.sanc = response.data
        console.log(response.data);
      }).catch(function (error) {
        console.log(error);
      })
      
      
      this.$axios.get('/findsharByid.do?uid='+this.uid).then(response => {
        this.shar = response.data
        console.log(response.data);
      }).catch(function (error) {
        console.log(error);
      })

      this.$axios.get('/findviewsByid.do?uid='+this.uid).then(response => {
        this.views = response.data
        console.log(response.data);
      }).catch(function (error) {
        console.log(error);
      })

    }
    }
</script>

<style scoped>
    .Mmain{
       width: 100%;
       margin: 100px auto;
    }
    #head1 {
        display: flex;
    }
   
    #touxiang {
        margin-right: 100px;
        margin-left: 100px;
    }

    #yhm {
        font-weight: bold;
        padding-top: 30px;
        font-size: 30px;
        
    }
    #yonghu{
        text-align: left;
    }
    #uid {
        font-size: 20px;
    }

    #main1 {
        margin-top: 100px;
        display: flex;
    }

    #main1 div {
        width: 25%;
    }

    #mbt {
        font-size: 30px;
        font-weight: bold;
    }

    #msl {
        font-size: 20px;
    }

    #main2 {
        display: flex;
    }

    #mainz {

        width: 40%;
        height: 500px;
        margin-right: 100px;
    }

    #mainy {
        width: 40%;

        height: 500px;
        margin-left: 150px;
    }
    #grxx{
        margin-left: 800px;
        margin-top: 80px;

    }
    .circlebtn{
        border-radius: 50%;
        background-color: rgba(0,0,0,0);
    }
</style>